<template>
	<view>
		<view class="top_member">
			<view class="top_one flex_jc_sb">
				<view class="top_l flex">
					<view
						class="btn_item"
						v-for="(item, index) in data.searchTypeList"
						:key="index"
						:class="item.value == data.active ? 'acrive_btn' : ''"
						@click="tabbarChange(item, index)"
					>
						{{ item.name }}
					</view>
				</view>
				<view class="top_r flex">
					<view class="ii flex_jc_cent" @click="$pageGo('/mypage/usertabbar/searchmember')">
						<image src="/static/cy2.png" mode=""></image>
					</view>
					<view class="ii flex_jc_cent" @click="popupSearch.open()">
						<image src="/static/cy3.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="top_two flex_jc_sb">
				<view class="t1">全部({{ data.total }}人)</view>
				<view class="flex" @click="$pageGo('/mypage/usertabbar/branchData')">
					<view class="t2">分社数据</view>
					<uni-icons type="right" size="18" color="#75613E"></uni-icons>
				</view>
			</view>
		</view>
		<loadstatusVue :status="data.loadStatus">
			<view class="contents">
				<view class="item flex_jc_sb" v-for="(item, index) in data.list" :key="index" style="height: 120rpx">
					<view class="items_l flex">
						<image v-if="item.img" :src="item.img" mode="aspectFill"></image>
						<image v-else src="https://www.daolangtongge.com/read-book-api/profile/mini_app/img/head.png" mode="aspectFill"></image>
						<view class="">
							<view class="flex">
								<view class="t1">{{ item.name }}</view>
								<view class="t2" v-if="item.vipType">{{ $userStatus(item.vipType) }}  {{ item.vipNumber }}</view>
							</view>
							<view class="t3">到期时间：{{ item.vipTimeEnd }}</view>
						</view>
					</view>
					<view class="items_r flex" v-if="item.id != props.userId">
						<view v-if="item.vip == 2" class="btn" @click="goManagement(item)">管理</view>
						<view class="btn" @click="openPop(item)">赠送</view>
					</view>
				</view>
			</view>
		</loadstatusVue>
		<view v-if="false" class="right_icon" @click="$pageGo('/mypage/usertabbar/claim')">
			<image src="/static/cy1.png" mode=""></image>
		</view>
		<!-- 搜索弹窗 -->
		<uni-popup ref="popupSearch" type="center" >
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">筛选</view>
				<view class="content_s">
					<!-- <view class="content_item flex">
						<view class="i_l">注册</view>
						<view class="i_r popup-date-picker">
							<uni-datetime-picker class="" :lefticon="false" :clear-icon="false" :border="false" type="daterange" rangeSeparator="至" />
						</view>
					</view> -->
					<view class="content_item flex">
						<view class="i_l">到期</view>
						<view class="i_r popup-date-picker">
							<uni-datetime-picker
								v-model="data.timeList"
								@change="timeChange"
								:lefticon="false"
								:clear-icon="false"
								:border="false"
								type="daterange"
								rangeSeparator="至"
							/>
						</view>
					</view>
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="handleReset">重置</view>
					<view class="bt b2" @click="handleSearch">搜索</view>
				</view>
			</view>
		</uni-popup>
		<!-- 赠送弹窗 -->
		<uni-popup ref="popupSend" type="center" >
			<view class="globalPopup">
				<uni-icons @click="close" type="closeempty" size="20" class="close" color="#AEAEAE"></uni-icons>
				<view class="title">赠送稻穗值</view>
				<view class="content_s">
					<view class="tss">我的稻穗值：{{ userData.points }}</view>
					<view class="tss">稻友ID：{{ params.userId }}</view>
					<view class="dinput">
						<input v-model="params.points" placeholder-class="input_text" type="number" placeholder="请输入" />
					</view>
				</view>
				<view class="btns flex_jc_sb">
					<view class="bt b1" @click="close">取消</view>
					<view class="bt b2" @click="handleConfirm">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, onMounted } from 'vue';
import loadstatusVue from '@/components/loadstatus/loadstatus.vue';
import { getGroupList, transferPoints } from '@/api/branch/member.js';
import { getData } from '@/api/user.js';
import { toast, showConfirm } from '@/utils/common.js';
const data = reactive({
	searchTypeList: [
		{
			name: '全部',
			value: 0
		},
		{
			name: '在期',
			value: 1
		},
		{
			name: '30天内到期',
			value: 2
		},
		{
			name: '到期',
			value: 3
		}
	],
	active: 0,
	list: [],
	total: 0,
	loadStatus: 'before', // 加载状态
	hasMore: true, // 是否有更多数据
	isLoading: false, // 防止重复请求的锁
	timeList: [],
	queryParams: {
		timeType: '0',
		pageNum: 1,
		pageSize: 10,
		vipEndTimeBegin: undefined,
		vipEndTimeEnd: undefined
	}
});
const popupSearch = ref(null);
const popupSend = ref(null);
const close = () => {
	popupSearch.value.close();
	popupSend.value.close();
};
const userData = reactive({});
const props = defineProps({
	userId: 0
});
// 赠送稻穗值
const params = reactive({
	userId: 0, // 接收人ID
	points: ''
});
const openPop = (item) => {
	getData({}).then((res) => {
		if (res.code == 200) {
			Object.assign(userData, res.data);
			params.userId = item.id;
			params.points = '';
			popupSend.value.open();
		}
	});
};
const handleConfirm = () => {
	if (params.points == '') {
		toast('请输入');
		return;
	}
	if (params.points > userData.points) {
		toast('赠送数量超出自身');
		return;
	}
	transferPoints(params).then((res) => {
		if (res.code == 200) {
			toast('已成功赠送稻穗');
			setTimeout(() => {
				close();
			}, 500);
		}
	});
};
// 延迟函数
const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms));
// 设置加载状态的方法
const setLoadStatus = (status, options = {}) => {
	data.loadStatus = status;
};
// 处理响应数据的通用方法
const handleResponseData = async (res, isLoadMore = false) => {
	// 如果是加载更多，确保loading状态至少显示500ms，避免闪烁
	if (isLoadMore) {
		await delay(500);
	}
	if (res.code == 200) {
		// 处理数据
		if (isLoadMore) {
			data.list.push(...res.rows);
			data.total = res.total;
		} else {
			data.list = res.rows || [];
			data.total = res.total;
		}
		// 判断是否有更多数据
		data.hasMore = res.rows && res.rows.length >= data.queryParams.pageSize;
		// 设置状态
		if (data.list.length === 0) {
			setLoadStatus('empty');
		} else if (!data.hasMore) {
			setLoadStatus('noMore');
		} else {
			setLoadStatus('success');
		}
		return true;
	}
	return false;
};
// 获取列表数据
const getList = async (isLoadMore = false) => {
	// 防止重复请求
	if (data.isLoading) return;
	try {
		data.isLoading = true;
		if (isLoadMore) {
			if (!data.hasMore) return;
			setLoadStatus('loading');
		} else {
			setLoadStatus('before');
			// 初始加载时显示loading至少1秒，避免闪烁
			await delay(300);
		}
		const res = await getGroupList(data.queryParams);
		const success = await handleResponseData(res, isLoadMore);
		if (!success) {
			// 请求失败的处理
			setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
		}
	} catch (err) {
		await delay(300);
		setLoadStatus(data.list.length === 0 ? 'empty' : 'success');
	} finally {
		data.isLoading = false;
	}
};
const tabbarChange = (item, index) => {
	data.active = index;
	data.queryParams.timeType = item.value; // 重置页码
	data.queryParams.pageNum = 1; // 重置页码
	getList(); // 重新加载
};
const handleSearch = () => {
	data.queryParams.pageNum = 1; // 重置页码
	close();
	getList(); // 重新加载
};
const timeChange = (e) => {
	if (e.length != 0) {
		data.queryParams.vipEndTimeBegin = e[0];
		data.queryParams.vipEndTimeEnd = e[1];
	}
};
const handleReset = () => {
	data.timeList = [];
	data.queryParams.vipEndTimeBegin = undefined;
	data.queryParams.vipEndTimeEnd = undefined;
};
const goManagement = (item) => {
	uni.setStorageSync('management', item);
	uni.navigateTo({
		url: '/mypage/usertabbar/management'
	});
};
// 加载更多方法 - 供父组件调用
const loadMore = () => {
  if (data.isLoading || !data.hasMore) {
    return false;
  }
  
  data.queryParams.pageNum++;
  getList(true); // 传递 true 表示是加载更多
  
  return true;
};
defineExpose({
	loadMore
});
onMounted(() => {
	uni.$on('changeGetList', function () {
		getList();
	});
	getList();
});
</script>
<style lang="scss" scoped>
.globalPopup {
	.content_s {
		.tss {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 28rpx;
			color: #8f8f8b;
			margin-top: 20rpx;
		}
		.dinput {
			margin: 20rpx auto 40rpx;
			width: 100%;
			height: 80rpx;
			background: #ffffff;
			border-radius: 12rpx 12rpx 12rpx 12rpx;
			border: 1px solid #dadada;
			input {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #000;
				height: 80rpx;
				line-height: 80rpx;
				padding-left: 15rpx;
			}
		}

		.content_item {
			height: 56rpx;
			margin: 30rpx auto;
			.i_l {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #75613e;
				margin-right: 20rpx;
			}

			.i_r {
				flex: 1;
				height: 56rpx;
				background: #eeeeee;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				input {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #000;
					height: 56rpx;
					line-height: 56rpx;
					padding-left: 18rpx;
				}
			}
		}
	}
}
.right_icon {
	position: fixed;
	z-index: 9;
	right: 20rpx;
	bottom: 160rpx;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	image {
		width: 108rpx;
		height: 100rpx;
		display: block;
	}
}

.top_member {
	width: 100%;
	position: sticky;
	top: 72rpx;
	height: 120rpx;
	background: #f3f0e8;
	padding: 0rpx 20rpx;
	box-sizing: border-box;
	.top_one {
		height: 52rpx;
		.top_l {
			.btn_item {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #b1b1b1;
				line-height: 36rpx;
				padding: 0rpx 20rpx;
				border: 1px solid #b1b1b1;
				border-radius: 30rpx;
				margin-right: 20rpx;
			}
			.acrive_btn {
				background: rgba(177, 149, 97, 0.2);
				color: #b19561;
				border: 1px solid #b19561;
			}
		}
		.top_r {
			.ii {
				width: 48rpx;
				height: 48rpx;
				border-radius: 30rpx;
				border: 1px solid #d8c6a7;
				margin-left: 20rpx;
				image {
					width: 24rpx;
					height: 24rpx;
				}
			}
		}
	}
	.top_two {
		height: 68rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #75613e;
		.t1 {
		}
	}
}
.contents {
	.item {
		width: 710rpx;
		height: 112rpx;
		background: #ffffff;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		margin: 0rpx auto 20rpx;
		padding: 20rpx;
		box-sizing: border-box;
		.items_l {
			image {
				width: 72rpx;
				height: 72rpx;
				border-radius: 40rpx;
				margin-right: 18rpx;
			}
			.t1 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 28rpx;
				color: #1b1b1b;
			}
			.t2 {
				display: inline-block;
				height: 32rpx;
				background: rgba(216, 198, 167, 0.5);
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				border: 1px solid #75613e;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				line-height: 32rpx;
				text-align: center;
				margin-left: 15rpx;
				padding: 0rpx 10rpx;
			}
			.t3 {
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #aeaeac;
				margin-top: 12rpx;
			}
		}
		.items_r {
			.btn {
				width: 68rpx;
				height: 44rpx;
				border-radius: 28rpx 28rpx 28rpx 28rpx;
				border: 1px solid #75613e;
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 20rpx;
				color: #75613e;
				line-height: 44rpx;
				text-align: center;
				margin-left: 15rpx;
			}
		}
	}
}
</style>
